<template>
  <div class="">
    <el-dialog
      ref="k_dia"
      :title="title"
      :visible.sync="open"
      width="1000px"
      :close-on-click-modal="false"
 
      class="dia-style k-dia"
      @close="handleCancel"
    >
      <div class="email-dia">
        <aside>
          <div class="option-group">
            <li
              :class="islink == 0 ? 'activeLink' : ''"
              href="#jichu"
              @click="islink = 0"
            >
              基础信息
            </li>
            <li
              :class="islink == 1 ? 'activeLink' : ''"
              href="#email"
              @click="islink = 1"
            >
              应急响应内容
            </li>
          </div>
        </aside>
        <el-form
          ref="elForm"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="100px"
          class="dia-form"
        >
          <div v-show="islink == 0">
            <el-col :span="14">
              <el-form-item label="名称" prop="processName">
                <el-input
                  v-model="formData.processName"
                  placeholder="请输入名称"
                  clearable
                  disabled
                  :style="{ width: '100%' }"
                />
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="关联事件" prop="reKpiCode">
                <el-select
                  v-model="formData.reKpiCode"
                  placeholder="请输入关联事件"
                  clearable
                  filterable
                  disabled
                  :style="{ width: '100%' }"
                  @change="handleEvent($event)"
                >
                  <el-option
                    v-for="(item, index) in kpiOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="描述" prop="description">
                <el-input
                  v-model="formData.description"
                  type="textarea"
                  disabled
                  placeholder="请输入描述"
                  :maxlength="1000"
                  show-word-limit
                  :autosize="{ minRows: 4, maxRows: 4 }"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="启用状态" prop="useStatus">
                <el-switch v-model="formData.useStatus" disabled :active-value="1" :inactive-value="0" />
              </el-form-item>
            </el-col>
          </div>
          <div v-show="islink == 1">
            <!--            <el-col :span="24" style="margin-bottom: 18px">
              <span class="el-icon-help" style="color: #2979ff;cursor: pointer" @click="AddClick">添加</span>
            </el-col>-->
            <el-col :span="24">
              <hk-table
                ref="tables"
                :table-data="tableData"
                :table-columns="tableFieldList"
                :operate="false"
                :is-need-index="true"
                :show-index="true"
                :show-pag="false"
              >
                <!--      标题          -->
                <template #title="scope">
                  <el-input v-model="scope.row.row.title" />
                </template>
                <!--      内容          -->
                <template #content="scope">
                  <el-input v-model="scope.row.row.content" />
                </template>
                <!--      操作          -->
                <!--                <template #operate="scope">
                  <span style="color: blue" @click.stop="MoveClick(scope.row)">删 除</span>
                </template>-->
              </hk-table>
            </el-col>
          </div>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <!--        <el-button type="primary" @click="submitForm">保 存</el-button>-->
        <el-button @click="handleCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import HkTable from '@/components/Hk-Table'
import { getMetricsLists, emergencyPlanAdd, emergencyPlanEdit } from '@/api/dispose/emergencyResponsePlan'
import { eventContent } from '@/api/dispose/incidentHandling.js'
import { deepClone } from '@/utils'

export default {
  components: { HkTable },
  props: {
    form: {
      type: Object,
      default() {
        return {}
      }
    },
    title: {
      type: String,
      default() {
        return '添加'
      }
    }
  },
  data() {
    return {
      islink: 0,
      // 是否显示遮罩层
      open: false,
      formData: {},
      rules: {
        processName: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }
        ],
        reKpiCode: [
          {
            required: true,
            message: '请输入关联事件',
            trigger: 'change'
          }
        ]
      },
      kpiOptions: [],
      tableData: [],
      tableFieldList: [
        { label: '标题', param: 'title' },
        { label: '内容', param: 'content' }
      ],
      kpiCode: ''
    }
  },
  computed: {},
  watch: {
    form: {
      handler(newVal) {
        this.formData = deepClone(newVal)
        if (newVal.id) {
        // 查询应急响应内容
          this.kpiCode = newVal.kpiCode
          eventContent({ kpiCode: newVal.reKpiCode }).then(res => {
            this.tableData = res
          })
        }
      },
      deep: true
    }
  },
  created() {
    getMetricsLists({ kpiCode: this.kpiCode }).then(res => {
      if (res && res.length > 0) {
        this.kpiOptions = res.map((i, index) => {
          return { label: i.metricsName, value: i.metricsCode }
        })
      }
    })
  },
  mounted() {
  },
  methods: {
    /** 保存 */
    submitForm() {
      this.$refs['elForm'].validate((valid) => {
        if (!valid) {
          this.$message.error('请输入必填项')
          return
        }
        // TODO 提交表单
        if (!this.formData.id) {
          emergencyPlanAdd(Object.assign(this.formData, { emergencyPlanContentList: this.tableData })).then(res => {
            this.$message.success('保存成功')
            this.handleCancel()
            this.$emit('handleSave')
          })
        } else {
          emergencyPlanEdit(Object.assign(this.formData, { emergencyPlanContentList: this.tableData })).then(res => {
            this.$message.success('保存成功')
            this.handleCancel()
            this.$emit('handleSave')
          })
        }
      })
    },
    /** 表单清空 */
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    /** 取消 */
    handleCancel() {
      this.open = false
      this.islink = 0
      this.resetForm()
      this.tableData = []
    },
    /** 增加弹框数据 */
    AddClick() {
      const arr = {
        title: '',
        content: ''
      }
      this.tableData.push(arr)
    },
    /** 删除 */
    MoveClick(scope) {
      this.tableData.splice(scope.index, 1)
    },
    /** 关联事件触发事件 */
    handleEvent(value) {
      const currentItem = this.kpiOptions.filter(i => {
        return i.value == value
      })
      this.formData.kpiName = currentItem[0].label
    }
  }
}
</script>
<style lang="scss" scoped>
.email-dia {
  display: flex;
  height: 540px;
  width: 100%;
  justify-content: space-between;
  max-height: 100vh;

  aside {
    padding: 0;
    width: 140px !important;
    position: absolute;
    height: 540px;
    background: #fff;
    border-right: 1px solid #e8e8e8;

    .option-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;

      li {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 15px 0 15px 24px;
        cursor: pointer;
        font-size: 14px;
        color: #303032;
        font-weight: 400;

        &.activeLink {
          border-right: 2px solid #2979ff;
          background: #dfecff;
          color: #2979ff;
        }
      }
    }
  }

  .dia-form {
    margin-left: 140px;
    padding: 24px 80px 24px 24px;
    width: 100%;
    height: 100%;
  }

  .el-table {
    margin-top: 0;
  }
}

</style>
<style>
.k-dia.dia-style .el-dialog .el-dialog__body {
  padding: 0 !important;
}

</style>
